<template>
	<view class="box">
		<u--form labelPosition="left" labelWidth="auto" :model="model1" :rules="rules" ref="uForm">
			<u-form-item label="姓名" prop="name" borderBottom>
				<u--input v-model="model1.name" border="none" placeholder="请输入姓名"></u--input>
			</u-form-item>
			<u-form-item label="性别" prop="sex" borderBottom @click="openPicker('sex')">
				<u--input v-model="model1.sexName" border="none" disabled disabledColor="#fff" placeholder="请选择性别"></u--input>
			</u-form-item>
			<u-form-item label="出生年月" prop="birdate" borderBottom @click="showDatePicker = true">
				<u--input v-model="model1.birdate" border="none" disabled disabledColor="#fff" placeholder="请选择出生年月"></u--input>
			</u-form-item>
			<u-form-item label="照片" prop="image" borderBottom>
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="5" multiple :maxCount="1"></u-upload>
			</u-form-item>
			<u-form-item label="所属区域" prop="area" borderBottom @click="openPicker('area')">
				<u--input v-model="model1.areaName" border="none" disabled disabledColor="#fff" placeholder="请选择所属区域"></u--input>
			</u-form-item>
			<u-form-item label="学历" prop="education" borderBottom>
				<u--input v-model="model1.education" border="none" placeholder="请输入学历"></u--input>
			</u-form-item>
			<u-form-item label="毕业院校" prop="school" borderBottom>
				<u--input v-model="model1.school" border="none" placeholder="请输入毕业院校"></u--input>
			</u-form-item>
			<u-form-item label="所学专业" prop="major" borderBottom>
				<u--input v-model="model1.major" border="none" placeholder="请输入所学专业"></u--input>
			</u-form-item>
			<u-form-item label="从事专业" prop="cszy" borderBottom>
				<u--input v-model="model1.cszy" border="none" placeholder="请输入从事专业"></u--input>
			</u-form-item>
			<u-form-item label="工作单位" prop="company" borderBottom>
				<u--input v-model="model1.company" border="none" placeholder="请输入工作单位"></u--input>
			</u-form-item>
			<u-form-item label="职务、职称" prop="position" borderBottom>
				<u--input v-model="model1.position" border="none" placeholder="请输入职务、职称"></u--input>
			</u-form-item>
			<u-form-item label="专业领域" prop="type" borderBottom @click="openPicker('type')">
				<u--input v-model="model1.typeName" border="none" disabled disabledColor="#fff" placeholder="请选择专业领域"></u--input>
			</u-form-item>
			<u-form-item label="联系电话" prop="phone" borderBottom>
				<u--input v-model="model1.phone" border="none" placeholder="请输入联系电话"></u--input>
			</u-form-item>
			<u-form-item label="电子邮箱" prop="email" borderBottom>
				<u--input v-model="model1.email" border="none" placeholder="请输入电子邮箱"></u--input>
			</u-form-item>
			<u-form-item label="自我介绍" prop="introdution" borderBottom>
				<u--textarea v-model="model1.introdution" autoHeight border="none" placeholder="请输入自我介绍"></u--textarea>
			</u-form-item>
			<u-form-item label="推荐单位意见" prop="dwOpinion" borderBottom>
				<u--textarea v-model="model1.dwOpinion" autoHeight border="none" placeholder="请输入推荐单位意见"></u--textarea>
			</u-form-item>
			<u-form-item label="备注" prop="remark" borderBottom>
				<u--textarea v-model="model1.remark" autoHeight border="none" placeholder="请输入备注"></u--textarea>
			</u-form-item>
		</u--form>
		<u-row customStyle="padding-top: 20rpx">
			<u-button text="保存" type="primary" @click="submit"></u-button>
		</u-row>
		<u-picker :show="show" :columns="columns" keyName="dictLabel" @cancel="cancel" @confirm="confirm"></u-picker>
		<u-datetime-picker :show="showDatePicker" :minDate="minDate" :maxDate="maxDate" v-model="dateValue" mode="year-month" @cancel="cancelDatePicker" @confirm="confirmDatePicker"></u-datetime-picker>
	</view>
</template>

<script>
import env from '@/utils/env.js';
import * as dicts from '@/api/system/dict/data.js';
import * as district from '@/api/system/district.js';
import * as expert from '@/api/source/kjrc/EXPERT_BASIC.js'
function getDate(number) {
	const date = new Date(number);

	let year = date.getFullYear();
	let month = String(date.getMonth() + 1).padStart(2, 0);

	return `${year}-${month}`;
}
export default {
	data() {
		return {
			id: '',
			model1: {
				area: null,
				id: null,
				name: null,
				phone: null,
				sex: null,
				company: null,
				school: null,
				major: null,
				cszy: null,
				position: null,
				type: null,
				degree: null,
				province: null,
				city: null,
				email: null
			},
			rules: {
				area: [{ required: true, message: '所属区域不能为空', trigger: 'change' }],
				id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
				name: [{ required: true, message: '真实姓名不能为空', trigger: 'blur' }],
				phone: [{ required: true, message: '联系电话不能为空', trigger: 'blur' }],
				sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
				company: [{ required: true, message: '工作单位不能为空', trigger: 'blur' }],
				school: [{ required: true, message: '毕业院校不能为空', trigger: 'blur' }],
				major: [{ required: true, message: '所学专业不能为空', trigger: 'blur' }],
				cszy: [{ required: true, message: '从事专业不能为空', trigger: 'blur' }],
				position: [{ required: true, message: '职务、职称不能为空', trigger: 'blur' }],
				type: [{ required: true, message: '专业领域不能为空', trigger: 'change' }],
				degree: [{ required: true, message: '学位不能为空', trigger: 'blur' }]
			},
			fileList: [],
			show: false,
			columns: [[]],
			professionalFieldList: [],
			sexList: [],
			areaList: [],
			showDatePicker: false,
			dateValue: Number(new Date()),
			minDate:Number(new Date('1900-1-1')),
			maxDate:Number(new Date())
		};
	},
	onLoad(option) {
		this.id = option.id;
		this.getDicts();
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		submit() {
			this.$refs.uForm
				.validate()
				.then((res) => {
					const value = uni.getStorageSync('userInfo')
					this.model1.memberId = value.login_user.member.id
					expert.addEXPERT_BASIC(this.model1).then(res=>{
						uni.$u.toast('操作成功');
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					})
				})
				.catch((errors) => {
					uni.$u.toast('校验失败');
				});
		},
		cancelDatePicker() {
			this.showDatePicker = false;
		},
		confirmDatePicker(value) {
			this.model1.birdate = getDate(value.value);
			this.showDatePicker = false;
		},
		cancel() {
			this.show = false;
		},
		confirm(item) {
			this.model1[this.activePicker] = item.value[0].dictValue;
			this.model1[this.activePicker + 'Name'] = item.value[0].dictLabel;
			console.log(item);
			this.show = false;
		},
		openPicker(flag) {
			this.activePicker = flag;
			this.columns = []
			if (flag === 'sex') {
				this.columns.push(this.sexList)
			}
			if (flag === 'area') {
				this.columns.push(this.areaList)
			}
			if (flag === 'type') {
				this.columns.push(this.professionalFieldList)
			}
			this.show = true;
		},
		getDicts() {
			dicts.getDicts('sys_user_sex').then((res) => {
				this.sexList = res.data;
			});
			dicts.getDicts('person_zjtype').then((res) => {
				this.professionalFieldList = res.data;
			});
			district.findbyparentid('6103').then((res) => {
				res.data.forEach((item) => {
					this.areaList.push({
						dictLabel: item.name,
						dictValue: item.code
					});
				});
			});
		},
		afterRead(a) {
			uni.uploadFile({
				url: env.baseUrl + '/file/upload',
				filePath: a.file[0].url,
				name: 'file',
				success: (res2) => {
					var data = JSON.parse(res2.data);
					if (data.code == 200) {
						console.log(data);
						this.fileList.push({
							url: env.imgUrl + data.data.url
						});
						this.model1.image = data.data.url;
					} else {
						uni.showModal({
							title: '提示信息',
							content: '上传失败！'
						});
					}
				}
			});
		},
		deletePic() {
			this.fileList.splice(this.fileList.length - 1, 1);
			this.model1.image = null;
		}
	}
};
</script>

<style lang="scss" scoped>
.box {
	padding: 20rpx;
}
</style>
